
<template>
  <div class="h-full flex flex-col bg-wechat-bg">
    <!-- 导航栏 -->
    <div class="nav-bar h-12 flex items-center justify-between px-4">
      <h1 class="text-lg font-semibold">微信</h1>
      <div class="flex items-center space-x-4">
        <button class="text-white">
          <i class="fas fa-search text-lg"></i>
        </button>
        <button class="text-white">
          <i class="fas fa-plus text-lg"></i>
        </button>
      </div>
    </div>

    <!-- 消息列表 -->
    <div class="flex-1 overflow-y-auto">
      <div 
        v-for="chat in chats" 
        :key="chat.id"
        class="bg-white border-b border-gray-100"
        @click="openChat(chat)"
      >
        <div class="flex items-center p-4">
          <img 
            :src="chat.avatar" 
            :alt="chat.name"
            class="w-12 h-12 rounded"
          >
          <div class="flex-1 ml-3">
            <div class="flex justify-between items-center">
              <h3 class="font-medium text-gray-900">{{ chat.name }}</h3>
              <span class="text-xs text-gray-500">
                {{ formatTime(chat.lastMessage?.timestamp || 0) }}
              </span>
            </div>
            <div class="flex justify-between items-center mt-1">
              <p class="text-sm text-gray-600 truncate max-w-48">
                {{ chat.lastMessage?.content || '' }}
              </p>
              <div v-if="chat.unreadCount > 0" 
                   class="bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
                {{ chat.unreadCount }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航 -->
    <TabBar />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useChatStore } from '@/stores'
import TabBar from '@/components/common/TabBar.vue'
import dayjs from 'dayjs'

const router = useRouter()
const chatStore = useChatStore()

const chats = computed(() => chatStore.chats)

const openChat = (chat: any) => {
  chatStore.setCurrentChat(chat)
  router.push(`/chat/${chat.id}`)
}

const formatTime = (timestamp: number) => {
  if (!timestamp) return ''
  return dayjs(timestamp).format('HH:mm')
}
</script>
